
<template>
  <div class="calendar">

    <div class="ym">
      <!--后一个月按钮-->
      <i class="prev" @click="prevMonth">{{ '<' }}</i>
      <!-- 今天的年/月，如图显示的2019年11月 -->
      <span class="currentData">{{ year }}年{{ month }}月</span>
      <!--前一个月按钮-->
      <i class="next" @click="nextMonth">{{ '>' }}</i>

    </div>
    <div align="center">
      <el-button class="signIn" type="primary" @click="signIn">签到</el-button>
    </div>
    <ul class="thead">
      <li class="li-day">日</li>
      <li class="li-day">一</li>
      <li class="li-day">二</li>
      <li class="li-day">三</li>
      <li class="li-day">四</li>
      <li class="li-day">五</li>
      <li class="li-day">六</li>
    </ul>
    <ul id="data">
      <div v-if="signInValue == false">
      <li v-for="(value, key) in calList" :key="key" :class="{active:value==today}" >
        <!--展示日期-->
        <span1 class="day">{{ value }}</span1>
        <span class="pro" v-if="showProgrssStatus(value) === 0">{{ '休' }}</span>
      </li>
      </div>
      <div v-else>
        <li v-for="(value, key) in calList" :key="key" :class="{finished:value==today}">
          <!--展示日期-->
          <span1 class="day">{{ value }}</span1>
          <span class="pro" v-if="showProgrssStatus(value) === 0">{{ '休' }}</span>
        </li>
      </div>
    </ul>

  </div>

</template>

<script>

    export default {
      name: "SignIn",
      data() {
        return {
          year: '',               // 当前年份
          month: '',              // 当前月份
          today: 0,               // 当前日期
          calList: [],            // 日历数组
          progressData: [],       // 日历中的特殊表识
          signInValue: false
        };
      },
      mounted() {
        this.getCalendar();
      },
      methods: {
        signIn(){
        this.signInValue = true;
          this.$message({
            message: `签到成功！`,
            type: 'success'
          })
        },
        getCalendar(cYear, cMonth) {
          let calendarArr = [];
          let myDate = new Date();
          let year = cYear || this.year ? this.year : myDate.getFullYear();
          let month = cMonth || this.month ? this.month : (myDate.getMonth() + 1);
          let today = myDate.getDate();

          this.year = year;
          this.month = month;
          this.today = today;

          let firstday = new Date(year, (month -1), 1).getDay();//当月第一天是周几
          let days = new Date(year,month, 0).getDate();//当月有多少天+1
          for (let i=0; i < days; i++) {
            calendarArr[i] = i+1;
          }
          for (let j=0; j < firstday; j++) {    // 日 一 二 三 四 五 六         当月首日前位置补‘’
            calendarArr.unshift('');
          }
          // 获取日历的行数
          let len = calendarArr.length;
          let line = Math.ceil(len / 7);

          for (let k = 0; k < line * 7 - len; k++) {    // 日 一 二 三 四 五 六         当月最后一日后位置补‘’
            calendarArr.push('');
          }
          this.calList = calendarArr;
          this.progressData = [
            {
              day: 7,
              month: 11,
              year: 2019,
              status: 0
            }
          ];
        },
        // 上一个月按钮点击
        prevMonth () {
          this.progressData = [];
          this.month--;
          if (this.month < 1) {
            this.month = 12;
            this.year--;
          }
          this.getCalendar(this.year, this.month);
        },
        // 下一个月按钮点击
        nextMonth () {
          this.progressData = [];
          this.month++;
          if (this.month > 12) {
            this.month = 1;
            this.year++;
          }
          this.getCalendar(this.year,this.month);
        },
        // 计算日历中每日任务的状态
        showProgrssStatus (value) {
          for (let item in this.progressData) {
            if (this.progressData[item].day === value && this.progressData[item].month === this.month && this.progressData[item].year === this.year) {
              if (this.progressData[item].done_time >= this.progressData[item].all_time) {
                return 1;
              } else {
                return this.progressData[item].status;
              }
            }
          }
        }
      }
    }
</script>

<style scoped>
  .calendar{
    background: #FFF;
    position: relative;
    width: 550px;
    height: auto;
    margin: 2px auto;
    border-radius: 2px;
    font-family: "PingFangSC-Regular";
    overflow: hidden
  }
  .ym {
    padding: 0px 0 30px;
    font-size: 36px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .prev{
    width: 20px;
    height: 30px;
    background-size: 100% 100%;
    margin-left: 17px;
  }
  .currentData{
    width: 200px;
    font-family: PingFangSC-Medium;
    font-size: 32px;
    color: #333;
  }
  .next{
    width: 20px;
    height: 30px;
    background-size: 100% 100%;
    margin-right: 17px;
  }
  ul.thead {
    width: 100%;
    display: table;
    padding-bottom: 36px;
  }
  .li-day {
    width: 14.28%;
    height: 40px;
    text-align: left;
    font-size: 28px;
    float: left;
    font-family: PingFangSC-Regular;
    color: #888;
  }
  span1 {
    font-size: 22px;
  }
  #data{
    margin-top: 0;
  }
  li {
    width: 14.28%;
    height: 70px;
    text-align: center;
    float: left;
  }

  img{
    width: 32px;
    height: 32px;
    display: block;
    margin: 0 auto;
    background-size: cover;
  }
  span{
    font-size: 22px;
    display: block;
    color: #ccc;
  }
  .pro {
    font-size: 22px;
    color: #CCC;
    margin-top: 12px;
  }
  li.active {
    color: #FD810B;
  }
  li.finished{
    color: #66CD00;
  }
  span.pro{
    font-size: 22px;
    color: #FD810B;
    margin-top: 12px;
  }
</style>
